<template>
  <div class="app-container">
    <el-form autoComplete="on" ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="角色名" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="角色描述" prop="mark">
        <el-input type="textarea" v-model="form.mark"></el-input>
      </el-form-item>
      <el-form-item label="角色权限" prop="powers">
        <el-tree
          :data="powers"
          node-key="code"
          show-checkbox
          default-expand-all
          ref="tree"
          :expand-on-click-node="false"
          :props="powerVal">
        </el-tree>
      </el-form-item>

      <div style="text-align: center;">
        <el-checkbox v-model="isAll" @change="checkAll" style="padding: 0 20px;">全选</el-checkbox>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { postAdd, postOne, getOne } from '@/api/role'
import { powerTree } from '@/utils/auth'

export default {
  data() {
    return {
      form: {
        name: '',
        mark: '',
        powers: []
      },
      rules: {
        name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
        powers: [{ required: true, message: '请选择角色权限' }]
      },
      isAll: false,
      powerVal: {
        children: 'child',
        label: 'title'
      },
      powers: powerTree
    }
  },
  created() {
    if (this.$route.query._id) {
      getOne({ _id: this.$route.query._id }).then(info => {
        Object.assign(this.form, info.data)
        if (this.form.powers.length > 0) this.$refs.tree.setCheckedKeys(this.form.powers)
      })
    }
  },
  methods: {
    checkAll() {
      if (this.isAll) {
        var arr = []
        powerTree.forEach((v) => {
          arr.push({ code: v.code, label: '' })
        })
        this.$refs.tree.setCheckedNodes(arr)
      } else {
        this.$refs.tree.setCheckedKeys([])
      }
    },
    onSubmit() {
      var self = this
      this.form.powers = this.$refs.tree.getCheckedKeys()
      function call(res) {
        if (res.code !== 30000) {
          return self.$message('添加失败!')
        }
        self.$message({
          type: 'success',
          message: '添加成功!'
        })
        self.$router.replace('/role/list')
      }
      this.$refs.form.validate(valid => {
        if (!valid) {
          console.log('error submit!!')
          return false
        }
        if (this.$route.query._id) postOne({ _id: this.$route.query._id }, this.form).then(call)
        else postAdd(this.form).then(call)
      })
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">

.el-tree-node__expand-icon.is-leaf{display: none;}
.el-tree{
  .expanded{
    display: none;
  }
  .el-tree-node__content{
    height: 36px;
    padding-right: 20px;
  }
  .el-checkbox{padding-left: 10px;}
  >div{
    >.el-tree-node__content{
      background-color: #f5f7fa;
    }
    >.el-tree-node__children{
      >.el-tree-node{
        >.el-tree-node__children{
          >.el-tree-node{
            display: inline-block;
            .el-tree-node__children{
              display: none;
            }
          }
        }
      }
    }
  }
}
</style>
